<template>
  <div class="right-board">
    <el-tabs v-model="state.currentTab" class="center-tabs">
      <el-tab-pane label="组件属性" name="field" />
      <el-tab-pane label="组件样式" name="style" />
      <el-tab-pane label="表单属性" name="form" />
    </el-tabs>
    <div class="field-box">
      <el-scrollbar class="right-scrollbar">
        <!-- 组件属性 -->
        <el-form v-show="state.currentTab === 'field' && props.showField" size="small" label-width="90px" label-position="left">
          <template v-if="state.activeData._config_">
            <template v-if="hasTable">
              <template v-if="state.activeData._config_.goodKey === 'table'">
                <el-form-item
                  v-if="state.activeData.vModel !== undefined && !noVModelList.includes(state.activeData._config_.goodKey)"
                  label="控件字段"
                >
                  <el-input v-model="state.activeData.vModel" placeholder="请输入控件字段(v-model)" disabled />
                </el-form-item>
              </template>
              <template v-else>
                <template v-if="!state.activeData._config_.isSubTable">
                  <el-form-item
                    v-if="state.activeData.vModel !== undefined && !noVModelList.includes(state.activeData._config_.goodKey)"
                    label="数据库表"
                  >
                    <el-select
                      v-model="state.activeData._config_.tableName"
                      placeholder="请选择数据库表"
                      @change="tableChange"
                      filterable
                      disabled
                    >
                      <el-option
                        v-for="item in subTable"
                        :key="item.name"
                        :value="item.description"
                        :label="item.name ? item.description + '(' + item.name + ')' : item.description"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    v-if="state.activeData.vModel !== undefined && !noVModelList.includes(state.activeData._config_.goodKey)"
                    label="控件字段"
                  >
                    <el-select
                      v-model="state.activeData.vModel"
                      placeholder="请选择控件字段(v-model)"
                      clearable
                      @change="fieldChange"
                      filterable
                    >
                      <el-option
                        v-for="item in state.fieldOptions"
                        :key="item.columnName"
                        :value="item.columnName"
                        :label="item.columnName ? item.columnDescription + '(' + item.columnName + ')' : item.columnDescription"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </template>
                <template v-if="state.activeData._config_.isSubTable && subTable.length">
                  <el-form-item
                    v-if="state.activeData.vModel !== undefined && !noVModelList.includes(state.activeData._config_.goodKey)"
                    label="控件字段"
                  >
                    <el-select
                      v-model="state.activeData.vModel"
                      placeholder="请选择控件字段(v-model)"
                      clearable
                      @change="fieldChangeSubTable"
                      filterable
                    >
                      <el-option
                        v-for="item in getTableFileds(state.activeData._config_.relationTable)"
                        :key="item.columnName"
                        :value="item.columnName"
                        :label="item.columnName ? item.columnDescription + '(' + item.columnName + ')' : item.columnDescription"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </template>
            </template>
            <template v-else>
              <el-form-item
                v-if="state.activeData.vModel !== undefined && !noVModelList.includes(state.activeData._config_.goodKey)"
                label="控件字段"
              >
                <el-input v-model="state.activeData.vModel" placeholder="请输入控件字段(v-model)" />
              </el-form-item>
            </template>

            <el-form-item v-if="state.activeData._config_.label !== undefined" label="控件标题">
              <el-input v-model="state.activeData._config_.label" placeholder="请输入控件标题" />
            </el-form-item>
            <el-form-item v-if="state.activeData.placeholder !== undefined" label="占位提示">
              <el-input v-model="state.activeData.placeholder" placeholder="请输入占位提示" />
            </el-form-item>
            <GoodInput
              v-if="state.activeData._config_.goodKey === 'comInput'"
              v-model:active-data="state.activeData"
              :key="state.activeData._config_.renderKey"
            />
            <GoodTextArea
              v-if="state.activeData._config_.goodKey === 'textarea'"
              v-model:active-data="state.activeData"
              :key="state.activeData._config_.renderKey"
            />
            <GoodInputNumber
              v-if="state.activeData._config_.goodKey === 'inputNumber'"
              v-model:active-data="state.activeData"
              :key="state.activeData._config_.renderKey"
            />
            <GoodCascader
              v-if="activeData._config_.goodKey === 'cascader'"
              v-model:active-data="state.activeData"
              :key="state.activeData._config_.renderKey"
            />
            <CommonRight v-if="isCommon" v-model:active-data="state.activeData" :key="state.activeData._config_.renderKey" />
            <GoodButton
              v-if="state.activeData._config_.goodKey === 'button'"
              v-model:active-data="state.activeData"
              :key="state.activeData._config_.renderKey"
            />
            <GoodText
              v-if="state.activeData._config_.goodKey === 'text'"
              v-model:active-data="state.activeData"
              :key="state.activeData._config_.renderKey"
            />
            <template v-if="isSystem">
              <!-- <el-form-item label="选择模板" v-if="state.activeData._config_.goodKey==='billRule'">
                <BillRule v-model="state.activeData._config_.rule" placeholder="选择模板" />
              </el-form-item> -->
              <el-form-item label="显示内容" v-if="state.activeData._config_.goodKey === 'currOrganize'">
                <el-select v-model="state.activeData.showLevel" placeholder="请选择显示内容">
                  <el-option label="显示组织" value="all"></el-option>
                  <el-option label="显示部门" value="last"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否隐藏">
                <el-switch v-model="state.activeData._config_.noShow" />
              </el-form-item>
            </template>
            <!-- <template v-if="state.activeData.on ">
              <el-divider>脚本事件</el-divider>
              <div v-for="(value,key) in state.activeData.on" :key="key">
                <el-form-item :label="key">
                  <el-button style="width: 100%;" @click="editFunc(value,key,false)">
                    {{getTipText(key)}}
                  </el-button>
                </el-form-item>
              </div>
            </template> -->
            <template v-if="state.activeData._config_.goodKey === 'table'">
              <el-form-item label="关联子表" v-if="subTable.length > 0">
                <el-select
                  v-model="state.activeData._config_.tableName"
                  placeholder="请选择关联子表"
                  clearable
                  @change="onTableNameChange"
                >
                  <el-option
                    v-for="item in subTable"
                    :key="item.name"
                    :label="item.name ? item.description + '(' + item.name + ')' : item.description"
                    :value="item.description"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="显示标题">
                <el-switch v-model="state.activeData._config_.showTitle" />
              </el-form-item>
              <el-form-item v-if="state.activeData.actionText !== undefined" label="动作文字">
                <el-input v-model="state.activeData.actionText" placeholder="请输入动作文字" />
              </el-form-item>
              <el-form-item label="是否合计">
                <el-switch v-model="state.activeData['show-summary']" />
              </el-form-item>
              <el-form-item label="合计字段" v-if="activeData['show-summary']">
                <el-select v-model="state.activeData.summaryField" multiple placeholder="请选择合计字段">
                  <template v-for="(item, i) in state.activeData._config_.children">
                    <el-option
                      :key="i"
                      :label="item._config_.label"
                      :value="item.vModel"
                      v-if="['comInput', 'numInput', 'calculate'].includes(item._config_.goodKey)"
                    />
                  </template>
                </el-select>
              </el-form-item>
            </template>
            <template v-if="state.activeData._config_.goodKey === 'card'">
              <el-form-item label="卡片标题" label-width="76px">
                <el-input v-model="state.activeData.header" placeholder="请输入卡片标题" />
              </el-form-item>
              <el-form-item label="显示阴影" label-width="76px">
                <el-radio-group v-model="state.activeData.shadow" size="small">
                  <el-radio-button value="always">一直显示</el-radio-button>
                  <el-radio-button value="hover">移入显示</el-radio-button>
                  <el-radio-button value="never">永不显示</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </template>
            <!-- row 布局 -->
            <template v-if="state.activeData._config_.goodKey === 'row'">
              <el-form-item v-if="state.activeData._config_.componentName !== undefined" label="组件名">
                {{ state.activeData._config_.componentName }}
              </el-form-item>
            </template>
            <el-form-item
              v-if="state.activeData._config_.layout === 'ContainerItem' && state.activeData.gutter !== undefined"
              label="栅格间隔"
            >
              <el-input-number v-model="state.activeData.gutter" :min="0" placeholder="栅格间隔" controls-position="right" />
            </el-form-item>
          </template>
        </el-form>
        <!-- 组件样式 -->
        <el-form v-show="state.currentTab === 'style'" size="small" label-width="90px" label-position="left">
          <template v-if="state.activeData._config_">
            <template v-if="!state.activeData._config_.isSubTable">
              <el-form-item label="控件栅格">
                <el-slider v-model="state.activeData._config_.span" :max="24" :min="6" show-stops :step="2" show-tooltip />
              </el-form-item>
              <el-form-item label="左侧间隔">
                <el-slider v-model="state.activeData.offset" :max="24" :min="0" show-stops />
              </el-form-item>
              <el-form-item
                label="标题宽度"
                v-if="
                  !['divider', 'text', 'button', 'table', 'groupTitle ', 'card', 'row', 'tab', 'collapse'].includes(
                    state.activeData._config_.goodKey
                  )
                "
              >
                <el-input-number
                  v-model="state.activeData._config_.labelWidth"
                  placeholder="标题宽度"
                  :min="0"
                  :precision="0"
                  controls-position="right"
                />
              </el-form-item>
            </template>
            <el-form-item label="控件宽度" v-if="state.activeData._config_.isSubTable">
              <el-input-number
                v-model="state.activeData._config_.columnWidth"
                placeholder="控件宽度"
                :min="0"
                :precision="0"
                controls-position="right"
              />
            </el-form-item>
            <el-form-item label="多端显示">
              <el-checkbox-group v-model="state.activeData._config_.visibility" size="small" class="visibility-checkbox">
                <el-checkbox-button value="pc">PC</el-checkbox-button>
                <el-checkbox-button value="app">APP</el-checkbox-button>
              </el-checkbox-group>
            </el-form-item>
          </template>
        </el-form>
        <!-- 表单属性 -->
        <el-form v-show="state.currentTab === 'form'" size="small" label-width="100px" label-position="left">
          <el-form-item label="表单尺寸">
            <el-radio-group v-model="state.formConf.size">
              <el-radio-button value="large">较大</el-radio-button>
              <el-radio-button value="default">中等</el-radio-button>
              <el-radio-button value="small">较小</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="标签对齐">
            <el-radio-group v-model="state.formConf.labelPosition">
              <el-radio-button value="left">左对齐</el-radio-button>
              <el-radio-button value="right">右对齐</el-radio-button>
              <el-radio-button value="top" :disabled="state.formConf.formStyle === 'word-form'">顶部对齐 </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="标题宽度">
            <el-input-number v-model="state.formConf.labelWidth" :min="0" placeholder="标题宽度" controls-position="right" />
          </el-form-item>
          <el-form-item label="栅格间隔">
            <el-input-number v-model="state.formConf.gutter" :min="0" placeholder="栅格间隔" controls-position="right" />
          </el-form-item>
          <!-- <el-form-item label="弹窗类型" v-if="modelType != 3 && modelType!=6 && webType==2"> -->
          <el-form-item label="弹窗类型">
            <el-select v-model="state.formConf.popupType" placeholder="请选择">
              <el-option label="居中弹窗" value="general"></el-option>
              <el-option label="右侧弹窗" value="drawer"></el-option>
              <el-option label="全屏弹窗" value="fullScreen"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="表单样式" v-if="modelType != 3"> -->
          <el-form-item label="表单样式">
            <el-select v-model="state.formConf.formStyle" placeholder="请选择">
              <el-option label="默认风格" value=""></el-option>
              <el-option label="公文风格" value="word-form"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="表单宽度" v-if="state.formConf.popupType === 'general'">
            <el-select v-model="state.formConf.generalWidth" placeholder="请选择">
              <el-option v-for="item in state.generalWidthOptions" :label="item" :value="item" :key="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="表单宽度" v-if="state.formConf.popupType === 'fullScreen'">
            <el-select v-model="state.formConf.fullScreenWidth" placeholder="请选择">
              <el-option v-for="item in state.fullScreenWidthOptions" :label="item" :value="item" :key="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="表单宽度" v-if="state.formConf.popupType === 'drawer'">
            <el-select v-model="state.formConf.drawerWidth" placeholder="请选择">
              <el-option v-for="item in state.generalWidthOptions" :label="item" :value="item" :key="item" />
            </el-select>
          </el-form-item>
          <!-- <template v-if="modelType!=3 && modelType!=6 && webType!=3"> -->
          <el-divider>表单按钮</el-divider>
          <div class="per-cell">
            <el-checkbox v-model="state.formConf.hasConfirmBtn" disabled>确定</el-checkbox>
            <el-input v-model="state.formConf.confirmButtonText" />
          </div>
          <div class="per-cell">
            <el-checkbox v-model="state.formConf.hasCancelBtn" disabled>取消</el-checkbox>
            <el-input v-model="state.formConf.cancelButtonText" />
          </div>

          <!-- <template v-if="state.formConf.funcs && (modelType==1||modelType==6)">
            <el-divider>脚本事件</el-divider>
            <el-form-item label="onLoad">
              <el-button style="width: 100%;"
                @click="editFunc(state.formConf.funcs.onLoad,'onLoad',true)">表单加载触发
              </el-button>
            </el-form-item>
            <el-form-item label="beforeSubmit">
              <el-button style="width: 100%;"
                @click="editFunc(state.formConf.funcs.beforeSubmit,'beforeSubmit',true)">提交前置触发
              </el-button>
            </el-form-item>
            <el-form-item label="afterSubmit">
              <el-button style="width: 100%;"
                @click="editFunc(state.formConf.funcs.afterSubmit,'afterSubmit',true)">提交后置触发</el-button>
            </el-form-item>
          </template> -->
        </el-form>
      </el-scrollbar>
    </div>
    <!-- <form-script v-model="state.formScriptVisible" :tpl="state.activeScript" :fields="props.drawingList"
      @updateScript="updateScript" /> -->
  </div>
</template>

<script setup lang="ts" name="RightPanel">
import { computed, reactive, watch, defineAsyncComponent } from "vue";
import { ElMessage } from "element-plus";
import { noVModelList } from "../configs/extConfig";
//import { getDictionaryTypeSelector } from "/@/api-services/apis/system/dictTypeApi"
//import { getDataInterfaceSelector } from "@/api/systemData/dataInterface"
import { useFormData } from "../stores/formStore";
import { FieldInfo } from "@/api-services/models/codeGen";
import { CodeGenTableInfo } from "@/api-services/models/codeGen/CodeGenTableInfo";

const GoodInput = defineAsyncComponent(() => import("../RightPanelComponents/GoodInput.vue"));
const GoodTextArea = defineAsyncComponent(() => import("../RightPanelComponents/GoodTextArea.vue"));
const GoodInputNumber = defineAsyncComponent(() => import("../RightPanelComponents/GoodInputNumber.vue"));
const GoodButton = defineAsyncComponent(() => import("../RightPanelComponents/GoodButton.vue"));
const GoodCascader = defineAsyncComponent(() => import("../RightPanelComponents/Cascader/index.vue"));
const CommonRight = defineAsyncComponent(() => import("../RightPanelComponents/ComRight.vue"));
const GoodText = defineAsyncComponent(() => import("../RightPanelComponents/GoodText.vue"));
const commonRightList = ["comSelect", "depSelect", "posSelect", "userSelect", "dicSelect", "editor"];
const systemList = ["createUser", "createTime", "updateUser", "updateTime", "curOrg", "curPosition"];
const stores = useFormData();

const props = defineProps({
  showField: {
    type: Boolean,
    default: false
  },
  activeData: {
    type: Object,
    default: null
  },
  formConf: {
    type: Object,
    default: null
  },
  modelType: {
    type: String,
    default: ""
  },
  webType: {
    type: String,
    default: ""
  },
  drawingList: {
    type: Array,
    default: () => []
  }
});

const state = reactive({
  activeData: {} as any,
  formConf: {} as any,
  currentTab: "field",
  formScriptVisible: false,
  comScriptVisible: false,
  activeScript: "",
  activeFunc: "",
  isConf: false,
  printTplList: [],
  fieldOptions: [] as Array<FieldInfo>,
  dictionaryOptions: [],
  dataInterfaceOptions: [],
  generalWidthOptions: ["600px", "800px", "1000px", "40%", "50%", "60%", "70%", "80%"],
  fullScreenWidthOptions: ["800px", "1000px", "1200px", "1400px", "50%", "60%", "70%", "80%", "90%", "100%"]
});

const isSystem = computed(() => {
  return systemList.indexOf(state.activeData._config_.goodKey) > -1;
});
const tableFields = computed(() => {
  return stores.tableFields;
});

const allTable = computed(() => {
  return stores.allTable;
});
const hasTable = computed(() => {
  return allTable.value.length > 0;
});
const subTable = computed(() => {
  let tables = allTable.value.filter(o => o.tableType === "sub");
  if (!tables || !tables.length) return [];
  return tables;
});
const mainTable = computed(() => {
  let item = allTable.value.filter(o => o.tableType === "main")[0];
  if (!item) return {} as CodeGenTableInfo;
  return item;
});
const mainTableName = computed(() => {
  if (!mainTable.value || !mainTable.value.name) return "";
  return mainTable.value.name;
});
const isCommon = computed(() => {
  return commonRightList.indexOf(state.activeData._config_.goodKey) > -1;
});
// const drawingOptions=computed(()=> {
//   let list = [] as any
//   const loop = (data, parent) => {
//     if (!data) return
//     if (data._config_ && data._config_.goodKey !== 'table' && data._config_.children && Array.isArray(data._config_.children)) {
//           loop(data._config_.children, data)
//     }
//     if (Array.isArray(data)) data.forEach(d => loop(d, parent))
//     if (data.__vModel__ && data._config_.goodKey !== 'table') {
//       list.push(data)
//     }
//   }
//   loop(props.drawingList, null)
//   return list
// })
const emits = defineEmits(["updateActiveData", "updateFormConf"]);
watch(
  () => props.formConf,
  val => {
    if (val.formStyle === "word-form" && val.labelPosition === "top") {
      val.labelPosition = "left";
    }
  },
  {
    deep: true
  }
);

watch(
  () => props.activeData,
  val => {
    const propsData = toRef(props);
    state.activeData = propsData.value.activeData;
    state.formConf = propsData.value.formConf;
    if (!val._config_.tableName && val._config_.goodKey !== "table") {
      val._config_.tableName = mainTableName.value;
    }
    if (!val._config_.visibility) state.activeData._config_.visibility = ["pc", "app"];
    setDefaultOptions();
  }
);
watch(
  () => state.activeData,
  val => {
    emits("updateActiveData", val);
  }
);
watch(
  () => state.formConf,
  val => {
    emits("updateFormConf", val);
  }
);

const init = () => {
  // getDictionaryType()
  // getDataInterfaceSelector()
  //getPrintTplList()
  if (!state.activeData || !state.activeData._config_) return;
  if (!state.activeData._config_.visibility) state.activeData._config_.visibility = ["pc", "app"];
  if (!state.activeData._config_.tableName && state.activeData._config_.goodKey !== "table") {
    state.activeData._config_.tableName = mainTableName.value;
  }
  setDefaultOptions();
};

const getTableFileds = (tableName: string) => {
  let item = tableFields.value.filter(it => it.tableName === tableName);
  if (item && item.length > 0) {
    return item[0].fieldInfos;
  }
  return [];
};
const fieldChangeSubTable = (val: string) => {
  if (!val) return;
  const drawingList = stores.drawingList || [];
  let boo = false;
  const loop = (list: any) => {
    const renderKey = state.activeData._config_.renderKey;
    for (let i = 0; i < list.length; i++) {
      const e = list[i];
      const config = e._config_;
      if (
        config.goodKey === "table" &&
        config.tableName === state.activeData._config_.relationTable &&
        config.renderKey !== renderKey
      ) {
        for (let j = 0; j < config.children.length; j++) {
          const child = config.children[j];
          if (child.vModel === val) {
            boo = true;
            break;
          }
        }
      }
      if (config && config.goodKey != "table" && config.children && Array.isArray(config.children)) {
        loop(config.children);
      }
    }
  };
  loop(drawingList);
  if (boo) {
    ElMessage.warning(`子表字段【${val}】已存在,请重新选择!`);
    state.activeData.vModel = "";
    return;
  }
  let options = getTableFileds(state.activeData._config_.relationTable);
  let item = options.filter((o: FieldInfo) => o.columnName == val)[0];
  if (!item || !item.columnDescription) return;
  state.activeData._config_.label = item.columnDescription;
};
const fieldChange = (val: string) => {
  if (!val) return;
  const drawingList = stores.drawingList || [];
  let boo = false;
  const loop = (list: any) => {
    //当前选中组件的key
    const renderKey = state.activeData._config_.renderKey;
    for (let i = 0; i < list.length; i++) {
      const e = list[i];
      const config = e._config_;
      //如果Key不同且当前选中value和组件相同时
      if (e.vModel === val && config.renderKey !== renderKey) {
        boo = true;
        break;
      }
      if (config && config.goodKey != "table" && config.children && Array.isArray(config.children)) {
        loop(config.children);
      }
    }
  };
  loop(drawingList);
  if (boo) {
    ElMessage.warning(`字段【${val}】已存在,请重新选择!`);
    state.activeData.vModel = "";
    return;
  }
  let item = state.fieldOptions.filter(o => o.columnName == val)[0];
  if (!item || !item.columnDescription) return;
  state.activeData._config_.label = item.columnDescription;
};
const tableChange = () => {
  state.activeData.vModel = "";
  setDefaultOptions();
};
const setDefaultOptions = () => {
  if (!hasTable.value) return;
  if (state.activeData.vModel === undefined || state.activeData._config_.goodKey === "table") return;
  // 如果当前组件没有tableName或者tableName与主表一致
  if (!state.activeData._config_.tableName || state.activeData._config_.tableName === mainTableName.value) {
    let mainTableFields = tableFields.value.filter(it => it.tableName === mainTableName.value)[0];
    //默认设置为主表的字段
    state.fieldOptions = mainTableFields?.fieldInfos.filter(it => !it.isPrimaryKey);
  } else {
    //根据组件tablename筛选字段列表
    let fieldList = tableFields.value.filter(o => o.tableName === state.activeData._config_.tableName);
    //如果没有找到，那么将该组件的字段暂时设置为主表相关，同时清空关联字段
    if (!fieldList.length) {
      state.activeData._config_.tableName = mainTableName.value;
      let mainTableFields = tableFields.value.filter(it => it.tableName == mainTableName.value)[0];
      state.fieldOptions = mainTableFields?.fieldInfos.filter(it => !it.isPrimaryKey);
      state.activeData.vModel = "";
    } else {
      let item = fieldList[0];
      state.fieldOptions = item?.fieldInfos.filter(it => !it.isPrimaryKey);
    }
  }
};
// const spanChange = (val: string) => {
//   state.formConf.span = val;
// };
const onTableNameChange = (tableName: string) => {
  if (!tableName) return;
  const drawingList = stores.drawingList || [];
  let boo = false;
  const loop = (list: any) => {
    for (let i = 0; i < list.length; i++) {
      const e = list[i];
      const config = e._config_;
      if (config.goodKey === "table" && config.tableName === tableName) {
        boo = true;
        break;
      }
      if (config && config.goodKey != "table" && config.children && Array.isArray(config.children)) {
        loop(config.children);
      }
    }
  };
  loop(drawingList);
  if (boo) {
    ElMessage.warning(`子表【${tableName}】已存在,请重新选择!`);
    state.activeData._config_.tableName = "";
    return;
  }
  for (let i = 0; i < state.activeData._config_.children.length; i++) {
    state.activeData._config_.children[i]._config_.relationTable = tableName;
    state.activeData._config_.children[i].vModel = "";
  }
};
// const getDictionaryType=()=> {
//   getDictionaryTypeSelector().then(res => {
//     dictionaryOptions = res.data.list
//   })
// }
// const getDataInterfaceSelector=()=> {
//   getDataInterfaceSelector().then(res => {
//     dataInterfaceOptions = res.data
//   })
// }
// const getPrintTplList=()=> {
//   store.dispatch('base/getPrintFormTree').then(res => {
//     let list = res.filter(o => o.children && o.children.length)
//     state.printTplList = list.map(o => ({
//       ...o,
//       hasChildren: true
//     }))
//   })
// }
// const getTipText = (key: any) => {
//   let text = "";
//   switch (key) {
//     case "change":
//       text = "发生变化时触发";
//       break;
//     case "blur":
//       text = "失去焦点时触发";
//       break;
//     case "click":
//       text = "点击时触发";
//       break;
//     case "tab-click":
//       text = "面板点击时触发";
//       break;
//     default:
//       text = "";
//       break;
//   }
//   return text;
// };
// const updateScript = (data: any) => {
//   if (state.isConf) {
//     state.formConf.funcs[state.activeFunc] = data;
//   } else {
//     state.activeData.on[state.activeFunc] = data;
//   }
// };
// const editFunc = (str: any, funcName: any, isConf: any) => {
//   state.activeScript = str;
//   state.activeFunc = funcName;
//   state.isConf = isConf || false;
//   state.formScriptVisible = true;
// };
// const onBarcodeTextChange = (val: any) => {
//   if (!val) return;
//   let reg = /^[A-Za-z0-9]+$/;
//   if (!reg.test(val)) {
//     ElMessage.error("固定值请输入数字或者英文字母");
//   }
// };

init();
</script>

<style lang="scss" scoped>
.right-board {
  position: absolute;
  top: 0;
  right: 0;
  width: 340px;
  height: 100%;
  padding-top: 3px;
  background: #ffffff;
  border-radius: 4px;
  .field-box {
    position: relative;
    box-sizing: border-box;
    height: calc(100% - 42px);
    overflow: hidden;
  }
  .el-scrollbar {
    height: 100%;
  }
}
.select-item {
  box-sizing: border-box;
  display: flex;
  border: 1px dashed #ffffff;
  &.sortable-chosen {
    border: 1px dashed #409eff;
  }
  .select-line-icon {
    padding: 0 4px;
    font-size: 22px;
    line-height: 32px;
    color: #606266;
  }
  .close-btn {
    color: #f56c6c;
    cursor: pointer;
  }
  .option-drag {
    cursor: move;
  }
}
.time-range {
  .el-date-editor {
    width: 227px;
  }
  :deep(.el-icon-time) {
    display: none;
  }
}
.document-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 26px;
  height: 26px;
  font-size: 18px;
  line-height: 26px;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
  background: #409eff;
  border-radius: 0 0 6px;
}
.node-label {
  font-size: 14px;
}
.node-icon {
  color: #bebfc3;
}
.right-scrollbar {
  .el-form {
    .el-date-editor,
    .el-cascader,
    .el-select {
      width: 100%;
    }
  }
}
.per-cell {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  .el-checkbox {
    width: 146px;
  }
  &.last {
    margin-bottom: 0;
  }
}
.visibility-checkbox {
  width: 100%;
  .el-checkbox-button {
    width: 50%;
    .el-checkbox-button__inner {
      width: 100%;
      text-align: center;
    }
  }
}
</style>
